<!doctype html>
<html lang="zh-cn">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <title>学生信息管理系统</title>
    <!-- 本代码纯属原创，作者：余中钰 -->
</head>

<body>


    <nav class="navbar navbar-expand-sm navbar-dark">
        <a class="navbar-brand" href="#">
            <img src="images/logo_white.png" width="30" height="30" class="d-inline-block align-top" alt="logo">
            学生信息管理系统
        </a>
        <a class="navbar-brand indexbtn ml-auto" href="index.html">登录</a>
    </nav>



    <form action="admin/index.html" method="GET" class="loginform col-xs-12 col-sm-8 col-md-6 col-lg-4">
        <div class="form-group">
            <b>用户名/学号：</b>
            <input type="text" name="username" id="username" class="form-control">
        </div>

        <div class="form-group">
            <b>密码：</b>
            <input type="password" name="password" id="password" class="form-control">
        </div>

        <div class="form-group">
            <b>确认密码：</b>
            <input type="password" name="confirm_password" id="confirm_password" class="form-control">
        </div>

        <div class="form-group">
            <b>验证码：</b>
            <div class="row">
                <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
                <input type="text" name="vcode" id="vcode" class="form-control col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
                <img src="images/vcode.png" alt="验证码加载中" class="vcode col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
            </div>

        </div>

        <b>性别：</b>
        <input type="radio" name="sex" value="male" checked>男
        <input type="radio" name="sex" value="female">女

        <button type="submit" class="btn btn-success btn-block" id="zcbtn">提交注册</button>
    </form>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.js"></script>
    <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
    <script>

        $(document).ready(function () {

            $("#zcbtn").click(function () {
                //获取用户名
                var username = $("#username").val();
                //获取密码
                var password = document.getElementById("password").value;
                //获取2次密码
                var confirm_password = document.getElementById("confirm_password").value;

                //获取验证码
                var vcode = document.getElementById("vcode").value;

                //判断用户名为空
                if (username == "") {
                    alert("用户名不能为空！");
                    $("#username").focus();//将焦点设置到用户名输入框
                    return false;//阻止表单提交
                }
                //判断密码长度
                if (password.length < 6) {
                    alert("密码长度不足6位！");
                    $("#password").focus();//将焦点设置到密码输入框
                    return false;//阻止表单提交
                }

                //判断密码长度
                if (password != confirm_password) {
                    alert("两次密码不一致！");
                    $("#password").focus();//将焦点设置到密码输入框
                    return false;//阻止表单提交
                }
                //判断验证码是否正确
                if (vcode != "SESG" && vcode != "sesg") {
                    alert("验证码不正确！");
                    $("#vcode").focus();//将焦点设置到验证码输入框
                    return false;//阻止表单提交
                }


                //获取性别
                var sex = $("input:checked").val() == "male" ? "男" : "女";
                //弹出窗口显示信息
                alert("注册成功！！！\n用户名：" + username + "\n密码：" + password + "\n性别：" + sex + "\n验证码：" + vcode);
            })

        })
    </script>
</body>

</html>